<template>
  <div>
    <!--
      第一步: 安装
        npm i vue-json-excel -S
      第二步: 导入
        import Vue from 'vue'
        import JsonExcel from 'vue-json-excel'
        Vue.component('downloadExcel', JsonExcel)
      第三步: 使用
        <download-excel></download-excel>
        参数:
          data: Array -> 要导出的数据
          fields: Objet -> Json对象中要导出的字段。如果没有给定，则导出Json中的所有属性
          type: string -> mime类型[xls，csv]，默认值：xls
          name: string -> 要导出的文件名，默认：data.xls
          title: string/Array -> 数据的标题，可以是字符串或字符串数组（多个标题）
          footer: string/Array -> 数据的页脚，可以是字符串或字符串数组（多个页脚）
          worksheet: string -> 工作表选项卡的名称。默认值：“Sheet1”
          fetch: function -> 文件下载前通过接口获取数据,不需要data属性
          before-generate: function -> 文件下载前的操作
          before-finish: function -> 文件下载结束操作
          参考: https://www.cnblogs.com/gggggggxin/p/11982436.html
            ```
            <download-excel :fetch= "fetchData" :fields="json_fields" :before-generate = "startDownload" :before-finish = "finishDownload"  name="filename.xls"  >
              <el-button type="warning">导出excel</el-button>
            </download-excel>
            <script>
              async fetchData () {
                return await this.$store.dispatch("get/infolist", {id : 1})
              }
            </script>
            ```
     -->
    <download-excel
      :data = "json_data"
      :fields = "json_fields"
      name = "filename.xls">
      <el-button type="primary" size="small">导出EXCEL</el-button>
    </download-excel>
  </div>
</template>

<script>
export default {
  name: 'VueJsonExcel',
  data () {
    return {
      // json_fields里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
      // 如果需要自定义导出的数据，可以定义回调函数
      json_fields: {
        'Complete name': 'name', // 常规字段
        Telephone: 'phone.mobile', // 支持嵌套属性
        'Telephone 2': {
          field: 'phone.landline',
          // 自定义回调函数
          callback: value => {
            return `Landline Phone - ${value}`
          }
        }
      },
      // 需要导出的数据
      json_data: [
        {
          name: 'Tony Peña',
          city: 'New York',
          country: 'United States',
          birthdate: '1978-03-15',
          phone: {
            mobile: '1-541-754-3010',
            landline: '(541) 754-3010'
          }
        },
        {
          name: 'Thessaloniki',
          city: 'Athens',
          country: 'Greece',
          birthdate: '1987-11-23',
          phone: {
            mobile: '+1 855 275 5071',
            landline: '(2741) 2621-244'
          }
        }
      ]
    }
  }
}
</script>

<style>

</style>
